<template>
  <pageTabelLayout>
    <template #pageTabel>
      <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
                         :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                         @grid-ready="gridReady" style="height:calc(100% - 45px)" class='ag-theme-alpine'
                         :defaultColDef="defaultColDef"
                         :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                         @columnResized="onColumnResized" @columnMoved="onColumnMoved"></AgGridVuesCopys>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                         @change="changePage" @page-size-change="changeSize"
                         style="justify-content: center;margin-top: 10px;"
                         :page-size="pagination.pageSize" :current="pagination.page"/>
      </a-spin>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts">

import emitter from "@/hooks/useEventBus";
import {localeText} from '@/api/aggridZw'
import {onMounted, reactive, ref} from 'vue';
import {assTable} from '@/utils/assemblyLevelTable';
import {Message} from '@arco-design/web-vue';
import {usePagination, useTable} from '@/hooks/table';
import {adjuct} from '@/api/DyeingshopManagement/circulatCardAdjuct';
import {pagingList} from "@/api/paging";
import {saveOrUpdateGridState as saveOrUpdateGridState01} from '@/hooks/useGridState'

export default {
  name: 'cylinderDetailInfo',
  components: {},
  props: {
    searchData: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, {emit}) {
    const table = useTable();
    const adjuctApi = adjuct();
    emitter.on("refresh-cylinderDetailInfo", () => {
      pagination.page = 1;
      doRefresh();
      // gridOption.value.sizeColumnsToFit();
    });

    const pageLoading = ref(false)
    const doRefresh = async () => {
      pageLoading.value = true
      updateGridState01()
      await adjuctApi.getFindAdjuctDetail({page: pagination.page, limit: pagination.pageSize, ...props.searchData}).then(res => {
        // console.log(res);
        if (res.code === 200) {
          table.handleSuccess(res.data.list);
          gridOption.value.setRowData(res.data.list);
          total.value = res.data.total;
        }
      }).catch(console.log).finally(() => {
        pageLoading.value = false
      })
    };
    const pagination = usePagination(doRefresh);
    //表格方面
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150
    };
    let cfsValue: any = [
      {
        headerName: "客户名称",
        field: "customName",
      },
      {
        headerName: "流转卡号",
        field: "flowCardCode",
        cellRenderer: {
          template: `
            <a-link @click="a">{{ flowCardCode }}</a-link>`,
          setup(props: any) {
            const a = () => {
              // editHandler(props.params.data)
              emit('change-adjuct', props.params.data);
            };
            const flowCardCode = props.params.data.flowCardCode
            return {
              a,
              flowCardCode
            }
          }
        }
      },
      {
        headerName: "生产车间",
        field: "workshop",
      },
      {
        headerName: "开卡日期",
        field: "createTime",
      },
      {
        headerName: "客订名称",
        field: "circulatCard",
      },
      {
        headerName: "计划单号",
        field: "planOrderCode",
      },
      {
        headerName: "匹数",
        field: "houseNum",
      },
      {
        headerName: "重量",
        field: "flowCardWeight",
      },
      {
        headerName: "工段",
        field: "section",
      },
      {
        headerName: "工序",
        field: "process",
      },
      {
        headerName: "色号",
        field: "colorCode",
      },
      {
        headerName: "色称",
        field: "colorName",
      },
      {
        headerName: "纱批",
        field: "yarnBatch",
      },
      {
        headerName: "作业性质",
        field: "circulatCard",
      },
      {
        headerName: "责任部门",
        field: "dutyDep",
      },
      {
        headerName: "回修原因",
        field: "repairReason",
      },
      {
        headerName: "开始员工",
        field: "beginStaff",
      },
      {
        headerName: "工序计划开始时间",
        field: "planBeginTime",
      },
      {
        headerName: "工序计划开始时间",
        field: "planFinshTime",
      },
      {
        headerName: "工序计划实际开始时间",
        field: "realityBeginTime",
      },
      {
        headerName: "工序计划实际结束时间",
        field: "realityFinishTime",
      },
      // {
      //     headerName: "修改人",
      //     field: "circulatCard",
      // },
      // {
      //     headerName: "修改时间",
      //     field: "circulatCard",
      // },
    ];

    let a = [{
      showRowGroup: 'hide_def',
      "headerName": "",
      "checkboxSelection": true,
      "headerCheckboxSelection": true,
      "pinned": "left",
      "width": 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: "left",
    }]
    cfsValue = a.concat(cfsValue);
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }

    const localeTextData: any = ref(localeText);
    emitter.on('export-cylinderDetailInfo', () => {
      let selectList = gridOption.value.getSelectedRows();
      // console.log(selectList);
      if (selectList.length === 0) {
        Message.error('请勾选需要导出的数据')
        return
      } else {
        //导出数据
        // let nowRow = table.dataList.filter(function (o) {
        //     return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
        // })
        assTable(cfsValue, selectList, '缸卡明细信息');
      }
    });
    const pagingList1: any = ref(pagingList)
    const {saveGridState: saveGridState01, updateGridState: updateGridState01} = saveOrUpdateGridState01('cylinderDetailInfo002', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      pageLoading,
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pagingList1,
      pagination,
      table,
      localeTextData,
      changePage,
      changeSize,
      total,
      cfsValue,
      defaultColDef,
      gridReady,
    }
  }
}
</script>

<style scoped></style>